<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .s{
      width: 100px;
      height: 100px;
      border: 2px solid red;
      /* 一行超出 省略号代替 */
      /* overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; */
      -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
      display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    .father{
      width: 40px;
      height: 40px;
      background-color: aquamarine;
      display: flex;
      justify-content: space-between;
    }
    .son{
      background-color: black;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    /* 
    align-self, order的用法

      align-self 单独定义弹性元素在侧轴上的对齐方式。

      默认值 auto，继承父容器的align-item对齐方式，如果没有则为stretch。

      可设置属性值 center：在侧轴居中、flex-start：在侧轴起点、flex-end：在侧轴终点。
      
      order属性可以设定弹性元素在容器中的排列顺序，默认是按html文档书写的顺序进行排列。

      设置order:数字(1,2,3,4....)可以调换他们的位置。
    */
    .father .son:nth-child(2){
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="s">1234234234252424524523423423425242452452342342342524245245</div>
  <div class="father">
    <div class="son"></div>
    <div class="son"></div>
  </div>
</div>
<script>
  var isValid = function(s){
    let arr = s.split('')
    let l = []
    let a = arr.map(item => {
      if(item == ')') {
        item = '('
        return item
      }
      if(item == '}') {
        item = '{'
        return item
      }
      if(item == ']') {
        item = '['
        return item
    }
    return item
    });
    let ReverseArr = a.reverse()
    return ReverseArr
  //   if(a === ReverseArr){
  //     return true
  //   }
  //   return false
  }
  console.log(isValid("()[{]}"));
</script>
</body>
</html>